<template>
  <!-- 端口设置部分 -->
  <div class="ethernet-settings">
    <div class="top-box">
      <div v-if="isLargeScreen" class="grid-layout">
        <div style="margin-right: 10px;border-right: 1px solid #ccc;">
          <div class="text-left title">
            <v-icon color="blue" class="mr-5" large>mdi-serial-port</v-icon>
            串口设置
          </div>
          <v-container fluid>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center"></v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex justify-center text-center">
                  <div class="config-item">
                    COM0(RS232)
                  </div>
                </v-col>
                <v-col cols="4" class="d-flex justify-center text-center">
                  <div class="config-item">
                    COM1(RS485)
                  </div>
                </v-col>
                <v-col cols="4" class="d-flex justify-center text-center">
                  <div class="config-item">
                    COM2
                  </div>
                </v-col>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center">
                <div class="config-item">
                  是否启用
                </div>
              </v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="COM0Open"
                      :items="open"
                      item-text="txt"
                      item-value="value"
                      :menu-props="{
                        offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="COM1Open"
                      :items="open"
                      item-text="txt"
                      item-value="value"
                      :menu-props="{
                      offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="COM2Open"
                      :items="open"
                      item-text="txt"
                      item-value="value"
                      :menu-props="{
                        offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center">
                <div class="config-item">
                  波特率
                </div>
              </v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue1[0].COM0"
                      :items="option1"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM0Open"
                      :menu-props="{
                      offsetY: true,
                      maxHeight:172,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue1[0].COM1"
                      :items="option1"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM1Open"
                      :menu-props="{
                        offsetY: true,
                        maxHeight:172,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue1[0].COM2"
                      :items="option1"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM2Open"
                      :menu-props="{
                      offsetY: true,
                      maxHeight:172,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center">
                <div class="config-item">
                  数据位
                </div>
              </v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue2[0].COM0"
                      :items="option2"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM0Open"
                      :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue2[0].COM1"
                      :items="option2"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM1Open"
                      :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue2[0].COM2"
                      :items="option2"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM2Open"
                      :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center">
                <div class="config-item">
                  停止位
                </div>
              </v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue3[0].COM0"
                      :items="option3"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM0Open"
                      :menu-props="{
                      offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue3[0].COM1"
                      :items="option3"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM1Open"
                      :menu-props="{
                        offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue3[0].COM2"
                      :items="option3"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM2Open"
                      :menu-props="{
                      offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col cols="2" class="d-flex justify-center text-center">
                <div class="config-item">
                  校验
                </div>
              </v-col>
              <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue4[0].COM0"
                      :items="option4"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM0Open"
                      :menu-props="{
                        offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue4[0].COM1"
                      :items="option4"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM1Open"
                      :menu-props="{
                      offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
                <v-col cols="4" class="d-flex text-center">
                  <v-select
                      v-model="configValue4[0].COM2"
                      :items="option4"
                      item-text="txt"
                      item-value="value"
                      :disabled="!COM2Open"
                      :menu-props="{
                        offsetY: true,
                      }"
                      hide-details
                      outlined
                      dense></v-select>
                </v-col>
              </v-col>
            </v-row>
          </v-container>
        </div>
        <div>
          <div class="text-left title">
            <v-icon color="blue" class="mr-5" large>mdi-ethernet</v-icon>
            网口设置
          </div>
          <v-container fluid>
            <v-row align="center">
              <v-col cols="5" class="d-flex justify-center text-center">
                <div class="config-item">
                  设备IP
                </div>
              </v-col>
              <v-col cols="3" class="d-flex justify-center text-center">
                <div class="config-item">
                  端口号
                </div>
              </v-col>
              <v-col cols="2" class="d-flex justify-center text-center"></v-col>
              <v-col cols="2" class="d-flex justify-center text-center"></v-col>
            </v-row>
            <v-row v-for="(r, index) in row" :key="index" align="center">
              <v-col cols="5" class="d-flex justify-center text-center">
                <v-text-field
                    v-model="r.ip"
                    dense
                    hide-details
                    outlined
                    :disabled="r.use"
                ></v-text-field>
              </v-col>
              <v-col cols="3" class="d-flex justify-center text-center">
                <v-text-field
                    v-model="r.port"
                    dense
                    hide-details
                    outlined
                    :disabled="r.use"
                ></v-text-field>
              </v-col>
              <v-col cols="2" class="d-flex justify-center text-center">
                <v-btn icon @click="r.use ? cancelDevice(index) : useDevice(index)"
                       :color="r.use ? 'red' : 'primary'"
                >
                  <v-icon>{{ r.use ? 'mdi-cancel' : 'mdi-play-box-outline' }}</v-icon>
                  <span>{{ r.use ? '取消' : '启用' }}</span>
                </v-btn>
              </v-col>
              <v-col cols="2" class="d-flex justify-center text-center">
                <v-btn
                    v-if="!r.use"
                    @click="clearDev(index)"
                    icon
                    color="red"
                >
                  <v-icon>mdi-broom</v-icon>
                  清空
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
        </div>
      </div>
      <v-expansion-panels v-else style="max-width: 700px;margin:0 auto;">
        <v-expansion-panel>
          <v-expansion-panel-header>
            <div class="text-left title">
              <v-icon color="blue" class="mr-5" large>mdi-serial-port</v-icon>
              串口设置
            </div>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-container fluid>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center"></v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0;">
                  <v-col cols="4" class="d-flex justify-center text-center">
                    <div class="config-item">
                      COM0
                    </div>
                  </v-col>
                  <v-col cols="4" class="d-flex justify-center text-center">
                    <div class="config-item">
                      COM1
                    </div>
                  </v-col>
                  <v-col cols="4" class="d-flex justify-center text-center">
                    <div class="config-item">
                      COM2
                    </div>
                  </v-col>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center">
                  <div class="config-item">
                    是否启用
                  </div>
                </v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="COM0Open"
                        :items="open"
                        item-text="txt"
                        item-value="value"
                        :menu-props="{
                        offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="COM1Open"
                        :items="open"
                        item-text="txt"
                        item-value="value"
                        :menu-props="{
                      offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="COM2Open"
                        :items="open"
                        item-text="txt"
                        item-value="value"
                        :menu-props="{
                        offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center">
                  <div class="config-item">
                    波特率
                  </div>
                </v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue1[0].COM0"
                        :items="option1"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM0Open"
                        :menu-props="{
                      offsetY: true,
                      maxHeight:172,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue1[0].COM1"
                        :items="option1"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM1Open"
                        :menu-props="{
                        offsetY: true,
                        maxHeight:172,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue1[0].COM2"
                        :items="option1"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM2Open"
                        :menu-props="{
                      offsetY: true,
                      maxHeight:172,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center">
                  <div class="config-item">
                    数据位
                  </div>
                </v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue2[0].COM0"
                        :items="option2"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM0Open"
                        :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue2[0].COM1"
                        :items="option2"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM1Open"
                        :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue2[0].COM2"
                        :items="option2"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM2Open"
                        :menu-props="{
                        offsetY: true,
                        maxHeight: 172
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center">
                  <div class="config-item">
                    停止位
                  </div>
                </v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue3[0].COM0"
                        :items="option3"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM0Open"
                        :menu-props="{
                      offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue3[0].COM1"
                        :items="option3"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM1Open"
                        :menu-props="{
                        offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue3[0].COM2"
                        :items="option3"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM2Open"
                        :menu-props="{
                      offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="2" class="d-flex justify-center text-center">
                  <div class="config-item">
                    校验
                  </div>
                </v-col>
                <v-col cols="10" class="d-flex justify-center text-center" style="padding: 0">
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue4[0].COM0"
                        :items="option4"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM0Open"
                        :menu-props="{
                        offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue4[0].COM1"
                        :items="option4"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM1Open"
                        :menu-props="{
                      offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                  <v-col cols="4" class="d-flex text-center">
                    <v-select
                        v-model="configValue4[0].COM2"
                        :items="option4"
                        item-text="txt"
                        item-value="value"
                        :disabled="!COM2Open"
                        :menu-props="{
                        offsetY: true,
                      }"
                        hide-details
                        outlined
                        dense></v-select>
                  </v-col>
                </v-col>
              </v-row>
            </v-container>
          </v-expansion-panel-content>
        </v-expansion-panel>
        <v-expansion-panel>
          <v-expansion-panel-header>
            <div class="text-left title">
              <v-icon color="blue" class="mr-5" large>mdi-ethernet</v-icon>
              网口设置
            </div>
          </v-expansion-panel-header>
          <v-expansion-panel-content>
            <v-container fluid>
              <v-row align="center">
                <v-col cols="5" class="d-flex justify-center text-center">
                  <div class="config-item">
                    设备IP
                  </div>
                </v-col>
                <v-col cols="3" class="d-flex justify-center text-center">
                  <div class="config-item">
                    端口号
                  </div>
                </v-col>
                <v-col cols="2" class="d-flex justify-center text-center"></v-col>
                <v-col cols="2" class="d-flex justify-center text-center"></v-col>
              </v-row>
              <v-row v-for="(r, index) in row" :key="index" align="center">
                <v-col cols="5" class="d-flex justify-center text-center">
                  <v-text-field
                      v-model="r.ip"
                      dense
                      hide-details
                      outlined
                      :disabled="r.use"
                  ></v-text-field>
                </v-col>
                <v-col cols="3" class="d-flex justify-center text-center">
                  <v-text-field
                      v-model="r.port"
                      dense
                      hide-details
                      outlined
                      :disabled="r.use"
                  ></v-text-field>
                </v-col>
                <v-col cols="2" class="d-flex justify-center text-center">
                  <v-btn icon @click="r.use ? cancelDevice(index) : useDevice(index)"
                         :color="r.use ? 'red' : 'primary'"
                  >
                    <v-icon>{{ r.use ? 'mdi-cancel' : 'mdi-play-box-outline' }}</v-icon>
                    <span>{{ r.use ? '取消' : '启用' }}</span>
                  </v-btn>
                </v-col>
                <v-col cols="2" class="d-flex justify-center text-center">
                  <v-btn
                      v-if="!r.use"
                      @click="clearDev(index)"
                      icon
                      color="red"
                  >
                    <v-icon>mdi-broom</v-icon>
                    清空
                  </v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
    <div class="bottom-box">
      <v-container fluid>
        <v-row align="center" justify="center">
          <v-btn @click="refresh" class="refresh-btn"
                 style="background-color: #003366; color: white; margin-right: 10px;">刷新
          </v-btn>
          <v-btn class="save-btn" @click="save" style="background-color: #FFA500; color: white;">保存</v-btn>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<script>
const ipRule = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/
const data = {
  configValue1: [{COM0: '', COM1: '', COM2: ''}],
  configValue2: [{COM0: '', COM1: '', COM2: ''}],
  configValue3: [{COM0: '', COM1: '', COM2: ''}],
  configValue4: [{COM0: '', COM1: '', COM2: ''}]
};
export default {
  name: 'EthernetSettingsContent',
  mounted() {
    // setTimeout(()=> {
    //   this.$emit('getData', '端口设置');
    // }, 500);
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  data() {
    return {
      open: [
        {txt: '是', value: true},
        {txt: '否', value: false}
      ],
      COM0Open: false,
      COM1Open: false,
      COM2Open: false,
      option1: [
        {txt: '4800', value: 4800},
        {txt: '9600', value: 9600},
        {txt: '19200', value: 19200},
        {txt: '38400', value: 38400},
        {txt: '57600', value: 57600},
        {txt: '115200', value: 115200},
      ],
      option2: [
        {txt: '5', value: 5},
        {txt: '6', value: 6},
        {txt: '7', value: 7},
        {txt: '8', value: 8},
      ],
      option3: [
        {txt: '1', value: 1},
        {txt: '2', value: 2}
      ],
      option4: [
        {txt: '无', value: 0},
        {txt: '偶校验', value: 1},
        {txt: '奇校验', value: 2},
      ],
      configValue1: [{COM0: '', COM1: '', COM2: ''}],
      configValue2: [{COM0: '', COM1: '', COM2: ''}],
      configValue3: [{COM0: '', COM1: '', COM2: ''}],
      configValue4: [{COM0: '', COM1: '', COM2: ''}],
      row: [
        {ip: '', port: '', use: false},
        {ip: '', port: '', use: false},
        {ip: '', port: '', use: false},
        {ip: '', port: '', use: false},
        {ip: '', port: '', use: false}
      ],
      isLargeScreen: true,
    };
  },
  methods: {
    checkScreenSize() {
      this.isLargeScreen = window.innerWidth > 1100;
    },
    refresh() {
      // 刷新逻辑
      this.$emit('refresh')
    },
    save() {
      // 保存逻辑
      data.configValue1 = this.configValue1;
      data.configValue2 = this.configValue2;
      data.configValue3 = this.configValue3;
      data.configValue4 = this.configValue4;
      const formattedData = {
        "cmd": 243,
        "config": {
          "serial": {}
        }
      }
      if (this.COM0Open) {
        if (this.configValue1[0].COM0 === '' || this.configValue2[0].COM0 === '' || this.configValue3[0].COM0 === '' || this.configValue4[0].COM0 === '') {
          this.$emit('errMsg', '请完成COM0的配置');
          return;
        }
        formattedData.config.serial.COM0 = {
          'serial-baut': this.configValue1[0].COM0,
          'serial-databit': this.configValue2[0].COM0,
          'serial-stopbit': this.configValue3[0].COM0,
          'serial-parity': this.configValue4[0].COM0,
        }
      }
      if (this.COM1Open) {
        if (this.configValue1[0].COM1 === '' || this.configValue2[0].COM1 === '' || this.configValue3[0].COM1 === '' || this.configValue4[0].COM1 === '') {
          this.$emit('errMsg', '请完成COM1的配置');
          return;
        }
        formattedData.config.serial.COM1 = {
          'serial-baut': this.configValue1[0].COM1,
          'serial-databit': this.configValue2[0].COM1,
          'serial-stopbit': this.configValue3[0].COM1,
          'serial-parity': this.configValue4[0].COM1,
        }
      }
      if (this.COM2Open) {
        if (this.configValue1[0].COM2 === '' || this.configValue2[0].COM2 === '' || this.configValue3[0].COM2 === '' || this.configValue4[0].COM2 === '') {
          this.$emit('errMsg', '请完成COM2的配置');
          return;
        }
        formattedData.config.serial.COM2 = {
          'serial-baut': this.configValue1[0].COM2,
          'serial-databit': this.configValue2[0].COM2,
          'serial-stopbit': this.configValue3[0].COM2,
          'serial-parity': this.configValue4[0].COM2,
        }
      }
      const jsonData = JSON.stringify(formattedData);
      this.$emit('sendData', jsonData);

      const formatted = {
        'cmd': 244,
        'config': {
          'portmap': []
        }
      }
      this.row.forEach((r) => {
        if (r.use) {
          const line = {
            'ipaddr': r.ip,
            'port': parseInt(r.port)
          }
          formatted.config.portmap.push(line);
        }
      });
      const networkPortData = JSON.stringify(formatted);
      this.$emit('sendData', networkPortData);
    },
    useDevice(index) {
      if (!this.row[index].ip) {
        this.$emit('errMsg', '请配置设备IP');
        this.row[index].use = false;
        return;
      }
      if (!ipRule.test(this.row[index].ip)) {
        this.$emit('errMsg', 'IP格式有误');
        this.row[index].use = false;
        return;
      }
      if (!this.row[index].port) {
        this.$emit('errMsg', '请配置端口号');
        this.row[index].use = false;
        return;
      }
      this.row[index].use = true;
    },
    cancelDevice(index) {
      // this.row[index].ip = '';
      // this.row[index].port = '';
      this.row[index].use = false;
    },
    receiveData(data) {
      if (Object.keys(data).length <= 0) {
        // console.log("没有相关数据")
        return;
      }
      // console.log("---------- 端口 数据 ----------")
      // console.log(data)
      const serial = data.serial;
      const portmap = data.portmap;

      if (serial.COM0) {
        this.configValue1[0].COM0 = serial.COM0["serial-baut"];
        this.configValue2[0].COM0 = serial.COM0["serial-databit"];
        this.configValue3[0].COM0 = serial.COM0["serial-stopbit"];
        this.configValue4[0].COM0 = serial.COM0["serial-parity"];
        this.COM0Open = true;
      }
      if (serial.COM1) {
        this.configValue1[0].COM1 = serial.COM1["serial-baut"];
        this.configValue2[0].COM1 = serial.COM1["serial-databit"];
        this.configValue3[0].COM1 = serial.COM1["serial-stopbit"];
        this.configValue4[0].COM1 = serial.COM1["serial-parity"];
        this.COM1Open = true;
      }
      if (serial.COM2) {
        this.configValue1[0].COM2 = serial.COM2["serial-baut"];
        this.configValue2[0].COM2 = serial.COM2["serial-databit"];
        this.configValue3[0].COM2 = serial.COM2["serial-stopbit"];
        this.configValue4[0].COM2 = serial.COM2["serial-parity"];
        this.COM2Open = true;
      }

      for (const i in portmap) {
        this.row[i].port = portmap[i].port;
        this.row[i].ip = portmap[i].ipaddr;
        this.row[i].use = true;
      }
    },
    clearDev(index) {
      this.row[index].ip = '';
      this.row[index].port = '';
    }
  },
};
</script>

<style scoped>
v-select {
  overflow: hidden;
}

.ethernet-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.grid-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
}

.top-box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-width: 1330px;
  text-align: center;
}

.config-item {
  text-align: center;
}

.bottom-box {
  display: flex;
  justify-content: center;
  padding: 20px;
  width: 100%;
  border-top: 2px solid #ededed;
}

.refresh-btn {
  background-color: #003366;
  color: white;
  margin-right: 10px;
}

.save-btn {
  background-color: #FFA500;
  color: white;
}

@media (max-width: 1100px) {
  .grid-layout {
    display: block; /* 在小于1100px时，移除grid */
  }
}
</style>
